<template>
  <div class="bread" id="bread">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item
        v-for="(item, index) in breadlist"
        :disable="breadlist.length - 1 === index"
        :to="item.path"
        :key="item.id"
        >{{ $t(`menus.${item.name}`) }}</el-breadcrumb-item
      >
    </el-breadcrumb>
  </div>
</template>

<script>
import { defineComponent, watch, ref } from 'vue'
import { useRoute } from 'vue-router'

export default defineComponent({
  setup() {
    const route = useRoute()
    const breadlist = ref([])
    watch(
      () => route.matched,
      (newval) => {
        breadlist.value = newval
      },
      { deep: true, immediate: true }
    )
    return {
      breadlist
    }
  }
})
</script>

<style lang="scss" scoped></style>
